<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: jyq
 * @LastEditTime: 2022-01-08 16:31:56
-->
<template>
  <div ref= "bottom2_container" style="height:95%"></div>
</template>
<script>
import { Column, G2 } from '@antv/g2plot';
import { get } from "../../../utils/request";
import moment from "moment";
export default {
  data(){
     return{
       dataArr:[]
     }
  },
  mounted(){
   this.initData();
  },
  methods:{
    initChart(){
       G2.registerInteraction('element-link', {
         start: [{ trigger: 'interval:mouseenter', action: 'element-link-by-color:link' }],
         end: [{ trigger: 'interval:mouseleave', action: 'element-link-by-color:unlink' }],
     });
      const columnPlot = new Column(this.$refs.bottom2_container,{
      data:this.dataArr,
      xField: 'date',
      yField: 'value',
      seriesField: 'type',
      isPercent: true,
      isStack: true,
      meta: {
        value: {
          min: 0,
          max: 1,
        },
      },
      label: {
        position: 'middle',
        content: (item) => {
          return `${(item.value * 100).toFixed(2)}%`;
        },
        style: {
          fill: '#fff',
        },
      },
      tooltip: false,
      interactions: [{ type: 'element-highlight-by-color' }, { type: 'element-link' }],
    });

    columnPlot.render();
    },
     initData() {
      let url = "/dashboard/queryMouthData";
      get(url).then(res => {
        console.log(res.data)
        this.dataArr = res.data
        this.initChart();
      });
    },
  }
}
</script>
<style scoped>
</style>